<template>
  <!-- 热搜 热点-->
  <div class="ea_hot_panel">
    <!-- 热点标题 -->
    <div class="ea_title">
      <div class="title">{{ $t("index.hotstitle") }}</div>
      <div class="reflesh">
        <div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="ionicon"
            viewBox="0 0 512 512"
          >
            <path
              d="M434.67 285.59v-29.8c0-98.73-80.24-178.79-179.2-178.79a179 179 0 00-140.14 67.36m-38.53 82v29.8C76.8 355 157 435 256 435a180.45 180.45 0 00140-66.92"
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="32"
            />
            <path
              fill="none"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="32"
              d="M32 256l44-44 46 44M480 256l-44 44-46-44"
            />
          </svg>
        </div>
        <div @click="initData" :title="$t('index.hostreflesh')">
          {{ $t("index.hostreflesh") }}
        </div>
      </div>
    </div>
    <!-- 热点列表 -->
    <div class="ea_hot_list_panel" v-loading="loading">
      <!-- 列表 -->
      <div v-for="(item, index) in listData" :key="index">
        <div class="hot_list_item">
          <!-- 热点标题+热度图标 -->
          <div class="title ico">
            <div v-if="item.score < 500" class="new">{{ $t('hotlist.new') }}</div>
            <div v-else class="boom">{{ $t('hotlist.boom') }}</div>
            <div class="tit">
              <router-link :to="'/Search?q=' + item.value">
                {{ item.value }}</router-link
              >
            </div>
          </div>
          <el-popover placement="left-start" width="280" trigger="click">
            <!-- 热点操作 -->
            <div class="opr" slot="reference">
              <svg
                viewBox="0 0 24 24"
              >
                <g data-v-54c1ae8e="">
                  <path
                    data-v-54c1ae8e=""
                    d="M3 12c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9 2c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm7 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
                  ></path>
                </g>
              </svg>
            </div>
            <!-- 弹出内容 -->
            <div class="pop_msg">
              <div class="item" :title="$t('hotlist.nointerest')">
                <div class="ico">
                  <svg
                    viewBox="0 0 24 24"
                  >
                    <g>
                      <path
                        d="M9.5 7c.828 0 1.5 1.119 1.5 2.5S10.328 12 9.5 12 8 10.881 8 9.5 8.672 7 9.5 7zm5 0c.828 0 1.5 1.119 1.5 2.5s-.672 2.5-1.5 2.5S13 10.881 13 9.5 13.672 7 14.5 7zM12 22.25C6.348 22.25 1.75 17.652 1.75 12S6.348 1.75 12 1.75 22.25 6.348 22.25 12 17.652 22.25 12 22.25zm0-18.5c-4.549 0-8.25 3.701-8.25 8.25s3.701 8.25 8.25 8.25 8.25-3.701 8.25-8.25S16.549 3.75 12 3.75zM8.947 17.322l-1.896-.638C7.101 16.534 8.322 13 12 13s4.898 3.533 4.949 3.684l-1.897.633c-.031-.09-.828-2.316-3.051-2.316s-3.021 2.227-3.053 2.322z"
                      ></path>
                    </g>
                  </svg>
                </div>
                <div class="txt">{{$t('hotlist.nointerest')}}</div>
              </div>
              <div class="item" :title="$t('hotlist.harmful')">
                <div class="ico">
                  <svg
                    viewBox="0 0 24 24"
                    aria-hidden="true"
                    class="r-18jsvk2 r-4qtqp9 r-yyyyoo r-1q142lx r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"
                  >
                    <g>
                      <path
                        d="M9.5 7c.828 0 1.5 1.119 1.5 2.5S10.328 12 9.5 12 8 10.881 8 9.5 8.672 7 9.5 7zm5 0c.828 0 1.5 1.119 1.5 2.5s-.672 2.5-1.5 2.5S13 10.881 13 9.5 13.672 7 14.5 7zM12 22.25C6.348 22.25 1.75 17.652 1.75 12S6.348 1.75 12 1.75 22.25 6.348 22.25 12 17.652 22.25 12 22.25zm0-18.5c-4.549 0-8.25 3.701-8.25 8.25s3.701 8.25 8.25 8.25 8.25-3.701 8.25-8.25S16.549 3.75 12 3.75zM8.947 17.322l-1.896-.638C7.101 16.534 8.322 13 12 13s4.898 3.533 4.949 3.684l-1.897.633c-.031-.09-.828-2.316-3.051-2.316s-3.021 2.227-3.053 2.322z"
                      ></path>
                    </g>
                  </svg>
                </div>
                <div class="txt">{{$t('hotlist.harmful')}}</div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//获取统一请求接口
import { getHotSearchList } from "@/api";

export default {
  name: "HotList",
  props: {
    msg: String,
  },
  data() {
    return {
      listData: [],
      loading: true,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getHotSearchList();
    },
    reflesh() {
      this.loading = true;
      setTimeout(() => {
        this.initData();
      }, 1000);
    },
    //获取热搜列表
    async getHotSearchList() {
      let res = await getHotSearchList();
      if (res.state == 200) {
        this.listData = res.data;
        this.loading = false;
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 热点 */
.ea_hot_panel {
  display: flex;
  flex-direction: column;
}

.ea_title {
  display: flex;
  flex: 1;
  justify-content: space-between;
  padding: 22px 0;
}

.ea_title .title {
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.ea_title .reflesh svg {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 5px;
}

.ea_title .reflesh {
  display: flex;
  color: #939393;
  padding: 0 16px;
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
}
/* 热点样式 */
.ea_hot_list_panel {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  margin-bottom: 20px;
}

.hot_list_item {
  display: flex;
  flex: 1;
  justify-content: space-between;
  font-size: 14px;
  color: #333;

  overflow: hidden;
}

.hot_list_item > div {
  margin-bottom: 8px;
}

.hot_list_item .title {
  display: flex;
}

.hot_list_item .tit {
  display: inline-block;
  margin-left: 5px;
  width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 24px;
  color: #333;
}

.hot_list_item .tit a{
  color: #333;
}

/* 通用符号样式 */
/* 热 爆 新 */
.ico .hot {
  background-color: rgb(255, 148, 6);
  padding: 2px;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  text-align: center;
  line-height: 20px;
}

.ico .new {
  background-color: rgb(255, 56, 82);
  padding: 2px;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  text-align: center;
  line-height: 20px;
}

.ico .boom {
  background-color: rgb(175, 2, 25);
  padding: 2px;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  text-align: center;
  line-height: 20px;
}
.opr svg:hover {
  width: 1.25rem;
  height: 1.25.rem;
  background-color: rgb(239, 243, 244);
  border-radius: 50%;
  cursor: pointer;
}
.opr svg {
  width: 1.25rem;
  height: 1.25.rem;
  fill: #000;
}

.pop_msg {
  display: flex;
  flex-direction: column;
}

.pop_msg .item {
  display: flex;
  padding: 10px 10px;
}

.pop_msg .item:hover {
  cursor: pointer;
  background-color: rgb(239, 243, 244);
}

.pop_msg .ico {
  margin-right: 8px;
}

.pop_msg .txt {
  color: #000;
  font-size: 14px;
  line-height: 25px;
  font-weight: bold;
}

.pop_msg .ico svg {
  width: 1.25rem;
  height: 25px;
  fill: #000;
}
</style>